.post
    position relative
    top rem(30px)
    background #fff
    +above(cut)
        top rem(50px)

.post-content
    padding rem(40px) 0
    img
        max-width 100%
        margin rem(0px) auto
        display block
        padding 10px 0
        &.emoji
            display inline
            padding 0px
        &.post-cover
            margin-bottom rem(20px)
            +above(cut)
                margin-bottom rem(29px)
    img + em
        display block
        color darken(lightGray,30%)
        text-align center
        mainFont(300)
    p, h1, h2, h3, h4, h5, h6, ul, ol, iframe
        center(rem(800px))
        mainFont(400)
        font-size rem(18px)
        line-height rem(35px)
        padding 0 rem(20px)
        margin 0 auto rem(20px)
        letter-spacing 0.05rem
        +above(cut)
            font-size rem(20px)
            line-height rem(40px)
            margin 0 auto rem(29px)
    h1.post-title 
        margin 0 auto
        line-height rem(40px)
        +above(cut)
            line-height rem(60px)
            margin 0 auto rem(10px)
    p.subtitle
        color: darken(lightGray,30%)
        font-size: rem(18px)
        margin 0 auto rem(10px)
        line-height rem(30px)
        +above(cut)
            font-size rem(20px)
            line-height rem(40px)
    p.post-info
        mainFont(300)
        font-size rem(13px)
        letter-spacing 0
        color: darken(lightGray,30%)
        margin 0 auto
        +above(cut)
            font-size rem(16px)
        span, time
            vertical-align middle
        time
            margin-right rem(10px)
            +above(cut)
                margin-right rem(30px)
    li 
        padding rem(10px) 0
        ul 
        margin-bottom 0
    p, li
        color texts
        code
            color #bf616a
            word-wrap break-word
            background lightGray
            padding rem(3px) rem(5px)
            border-radius 3px
            font-size rem(18px)
    a
        color #0000ee
        text-decoration none
    iframe
        margin-top rem(30px)
        width 100%
    h1, h2, h3, h4, h5, h6
        mainFont(700)
    h1
        font-size rem(32px)
        line-height 1.4
        +above(cut)
            font-size rem(47px)
    h2
        font-size rem(24px)
        line-height 1.4
        +above(cut)
            font-size rem(37px)
    h3
        font-size rem(20px)
        line-height 1.4
        +above(cut)
            font-size rem(27px)
    ul, ol
        padding-left rem(40px)
    ul.post-list
        padding 0
        &.svg-serie p
            padding 0
        +below(cut)
            padding 0 rem(20px)
    blockquote
        center(rem(730px))
        border-left rem(5px) solid texts
        padding 0 rem(30px)
        margin rem(50px) auto
        +below(cut)
            width 90%
        p
            color rgba(0,0,0,0.6)
            margin 0
            +below(cut)
                font-size rem(20px)
                line-height 1.5
                padding 0
    hr
      center(rem(760px))
      border 1px solid lightGray
      margin 50px auto

    > table
        margin rem(50px) auto
        +below(cut)
            display none
        th, td
            border rem(2px) solid #ccc
            padding rem(5px)
    
    td > pre
        padding 0
        margin 0
    
    td.gutter.gl
        padding-right rem(25px)
        line-height rem(24px)

/* Progress bar */

.progress-bar
    position fixed
    left 0
    right 0
    bottom -100%
    display block
    width 100%
    background-color #fff
    padding rem(10px)
    transition bottom .5s
    border-top 1px solid #f2f2f2
    .bar
        display block
        width 100%
        height rem(18px)
        padding rem(5px) rem(50px)
    .completed
        float left
        display block
        height 8px
        background-color themeColor
    .remaining
        float left
        display block
        height rem(8px)
        background-color #ccc
    .time-completed, .time-remaining
        color texts
    .time-completed
        float left
    .time-remaining
        float right

.icon-clock, .icon-calendar
    width rem(15px)
    height rem(15px)
    fill darken(lightGray,30%)
    vertical-align middle
    margin-right rem(3px)

/* Tags */

.post-content
    .tags
        center(rem(800px))
        mainFont(400)
        font-size rem(18px)
        margin 0 auto rem(29px)
        margin-top rem(30px)
        letter-spacing 0.01rem
        line-height rem(40px)
        +above(cut)
            font-size rem(20px)
            letter-spacing 0.05rem
        a
            font-size rem(14px)
            color primaryDark
            display inline-block
            border 1px solid primaryDark
            border-radius rem(20px)
            padding 0 rem(10px)
            margin-right rem(2px)
            margin-bottom rem(8px)
            text-decoration none
            transition all .3s
            &:hover
                color accentDark
                border 1px solid primaryDark
                background-color primaryDark
    .tag-title
        mainFont(300)
        font-size rem(38px)
        margin-top rem(60px)
        center(rem(800px))
        +below(cut)
            font-size rem(30px)
            margin-top rem(20px)
            padding 0 rem(20px)
    .post-list
        list-style none
        margin rem(25px) auto
        +below(cut)
            padding 0 rem(20px)
        a
            display block
            border-bottom 1px solid darken(lightGray,10%)
            padding rem(10px) 0
            text-decoration none
            transition all .5s
            font-size rem(18px)
            &:hover
                border-bottom 1px solid themeColor
        .entry-date
            float right
            +below(cut)
                display none
